var Debug = {

	console: null,

	init: function() {

		this.console = document.createElement('div');

		with (this.console.style) {
			position = 'absolute';
			zIndex = 1024;
			right = '1em';
			top = '1em';
			width = '27em';
			height = '90%';
			overflow = 'scroll';
			background = '#eee';
			padding = '.5em';
			fontFamily = 'monospace';
			textAlign = 'left';
		}

		this.console.ondblclick = function() {
			this.style.height = (this.style.height == '90%') ? '3em' : '90%';
		}

		document.body.appendChild(this.console);
	},

	show: function (s, value) {
		if (this.console == null) this.init();

		if (value) {
			this.console.innerHTML =  s + ' = ' + value + '<br>' + this.console.innerHTML;
		} else {
			this.console.innerHTML =  s + '<br>' + this.console.innerHTML;
		}
	},

	showInfoAbout: function (obj, title) {
        if (!title) title = '~debug object~';
		this.show('<h2>' + title + '</h2>' + this.getInfoAbout(obj) );
	},

	getInfoAbout: function (obj) {

		var s = '';
		var val;

		for (var prop in obj) {

			if (prop != 'innerHTML' &&
				prop != 'outerHTML' &&
				prop != 'innerText' &&
				prop != 'outerText'
			) {
				try {
	 				eval("val = obj[" + prop + "]")
				} catch(e) {
					try {
						eval("val = obj." + prop);
					} catch(e) {
						val = "ERROR";
					}
				}

				if (typeof(val) == 'object' && val != null) {

                    this.arrSubItems[this.p_subItemsCounter] = val;

				    val = '<span style="border-bottom:dotted 1px; cursor:pointer;" ' +
                          'onclick="Debug.showInfoAbout(Debug.arrSubItems[' + this.p_subItemsCounter + '],\'' + prop + '\')">' +
                          val + '</span>';

				    this.p_subItemsCounter++;
				}

				s += "<b>" + prop + "</b>: " + val + '<br>\n';

			}
		}
		return s;
	},

	p_subItemsCounter: 0,
	arrSubItems: [],
}